<script setup lang="ts">
import { ref } from 'vue'

const toggleMenus = ref(Array(2).fill(false))
</script>

<template>
  <ul class="menu">
    <li>
      <span>Menu 1</span>
      <button class="btn" @click="toggleMenus[0] = !toggleMenus[0]">
        {{ toggleMenus[0] ? '-' : '+' }}
      </button>
    </li>
    <ul class="sub-menu" :style="{ display: toggleMenus[0] ? 'block' : 'none' }">
      <li>SubMenu 1.1</li>
      <li>SubMenu 1.2</li>
      <li>SubMenu 1.3</li>
    </ul>
    <li>
      <span>Menu 2</span>
      <button class="btn" @click="toggleMenus[1] = !toggleMenus[1]">
        {{ toggleMenus[1] ? '-' : '+' }}
      </button>
    </li>
    <ul class="sub-menu" :style="{ display: toggleMenus[1] ? 'block' : 'none' }">
      <li>SubMenu 1.1</li>
      <li>SubMenu 1.2</li>
      <li>SubMenu 1.3</li>
    </ul>
  </ul>
</template>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
.menu {
  background-color: #333;
  color: white;
  display: inline-block;
  width: 200px;
  padding: 10px 0;

  li {
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #666;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }

  .sub-menu li {
    padding: 10px;
    text-align: center;
    display: block;
    background-color: #444;
    /* opacity: 0; */

    &:hover {
      background-color: #555;
    }
  }

  .btn {
    box-sizing: border-box;
    padding: 0;
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
